<template>
  <div class="loginBox">
    <common-bg></common-bg>
    <div class="fixedBox">
      <div class="loginFrom">
        <div>
          <div
            class="person"
            v-if="registerType == '0'"
            style="padding-top: 35px"
          >
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="0px"
              style="width: 306px"
            >
              <el-form-item prop="nickname">
                <el-input
                  prefix-icon="iconfont icon-zhanghao7"
                  v-model="ruleForm.nickname"
                  @blur="ruleForm.nickname = $event.target.value.trim()"
                  placeholder="请输入姓名"
                ></el-input>
              </el-form-item>
              <el-form-item prop="phone">
                <el-input
                  v-model="ruleForm.phone"
                  placeholder="请输入11位手机号码"
                  maxlength="11"
                >
                  <template slot="prepend"
                    >+86 <img src="@/assets/imgs/选择.png" alt="" />
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="code">
                <el-row :gutter="20" class="Row" style="margin-left: -32px">
                  <el-col :span="16" style="padding-right: 0">
                    <el-input
                      disabled
                      style="border-radius: 4px 0 0 4px"
                      prefix-icon="iconfont icon-yanzhengma2"
                      v-model="ruleForm.code"
                      placeholder="请输入验证码"
                    ></el-input>
                  </el-col>
                  <el-col :span="8">
                    <el-button
                      disabled
                      class="getcode"
                      :class="{ disable: cdTimer }"
                      @click="getCode"
                    >
                      {{ codeBtnTxt }}
                    </el-button>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  prefix-icon="iconfont icon-mima"
                  v-model="ruleForm.password"
                  placeholder="6~32位密码，注意区分大小写"
                  type="password"
                ></el-input>
              </el-form-item>
              <el-form-item prop="password_confirmation">
                <el-input
                  prefix-icon="iconfont icon-mima"
                  v-model="ruleForm.password_confirmation"
                  placeholder="请确认密码"
                  type="password"
                >
                </el-input>
              </el-form-item>
              <div class="login-btn">
                <el-button
                  type="primary"
                  size="medium"
                  @click="submitForm('ruleForm')"
                  >个人账户注册
                </el-button>
              </div>
            </el-form>
          </div>
          <div class="company" v-if="registerType == '1'">
            <div class="first" v-show="!second">
              <div class="title">
                <div class="logo">
                  <img src="@/assets/imgs/logo_slices/logo.png" />
                </div>
                <div class="nama">Please Sign In</div>
              </div>
              <el-form
                :model="ruleFormCompanyFirst"
                :rules="rulesCompanyFirst"
                ref="ruleFormCompanyFirst"
                label-width="0px"
                style="width: 306px"
              >
                <el-form-item prop="title">
                  <el-input
                    prefix-icon="iconfont icon-gongsimingcheng2"
                    v-model="ruleFormCompanyFirst.title"
                    placeholder="公司名称(与公章公司名称一致)"
                    @blur="ruleForm.nickname = $event.target.value.trim()"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item prop="certificate">
                  <el-input
                    prefix-icon="iconfont icon-yanzhengma"
                    v-model="ruleFormCompanyFirst.certificate"
                    placeholder="公司社会信用代码"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="phone">
                  <el-input
                    v-model="ruleFormCompanyFirst.phone"
                    placeholder="请输入11位手机号码"
                    maxlength="11"
                  >
                    <template slot="prepend"
                      >+86 <i class="el-icon-arrow-down"></i>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item prop="auth_book">
                  <div>
                    <el-row
                      :gutter="20"
                      style="padding-left: 0px; margin-left: 0px"
                    >
                      <el-col
                        :span="16"
                        style="padding-left: 0px; padding-right: 0px"
                      >
                        <el-input
                          class="limitLength"
                          prefix-icon="iconfont icon-shouquanshu"
                          v-model="ruleFormCompanyFirst.auth_book"
                          placeholder="授权书"
                        ></el-input>
                      </el-col>
                      <el-col
                        :span="8"
                        style="padding-left: 0; margin-left: 30px"
                      >
                        <el-upload
                          class="upload-demo"
                          action="/api/attachment/upload"
                          :show-file-list="false"
                          ref="upload"
                          :on-success="handleSuccess"
                        >
                          <el-button
                            class="uploadBtn"
                            size="small"
                            type="warning"
                            icon="iconfont icon-shangchuan2"
                            >上传</el-button
                          >
                        </el-upload>
                      </el-col>
                    </el-row>
                  </div>
                  <el-button size="small" @click.native="aDown()"
                    >下载</el-button
                  >
                </el-form-item>

                <div class="login-btn" style="margin-top: 15px">
                  <el-button
                    type="primary"
                    @click="submitFormCompanyFirst('ruleFormCompanyFirst')"
                    >提交审核</el-button
                  >
                </div>
              </el-form>
            </div>
          </div>
          <div class="registerBtn">
            <el-button type="text" size="medium" @click="goLogin"
              >使用已有账户登录</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "../../api/login/index";
import commonBg from "./components/commonBg.vue";
import { storeCompanyAndUser } from "../../api/company";

export default {
  components: {
    commonBg,
  },
  data() {
    let valitPhone = (rule, value, callback) => {
      let myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else if (!myreg.test(value)) {
        callback(new Error("请输入合法手机号"));
      } else {
        callback();
      }
    };
    let validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      /* 判断个人注册还是公司注册 */
      registerType: this.$route.query.type,
      /* 个人注册表单信息 */
      ruleForm: {
        phone: "",
        /*   code: '', */
        password: "",
        password_confirmation: "",
      },
      /* 个人注册失焦判断 */
      rules: {
        nickname: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
        ],
        phone: [
          {
            validator: valitPhone,
            trigger: "blur",
          },
        ],
        /*  code: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur",
          },
        ], */
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            min: 6,
            max: 32,
            message: "长度在 6 到 32 个字符",
            trigger: "blur",
          },
        ],
        password_confirmation: [
          {
            validator: validatePass2,
            trigger: "blur",
          },
        ],
      },
      /* 公司注册表单数据 */
      ruleFormCompanyFirst: {
        title: "",
        certificate: "",
        phone: "",
        // code: '',
        auth_book: "",
      },
      /* 公司注册表单失焦判断 */
      rulesCompanyFirst: {
        title: [
          {
            required: true,
            message: "请输入公司名称",
            trigger: "blur",
          },
        ],
        certificate: [
          {
            required: true,
            message: "请输入信用代码",
            trigger: "blur",
          },
        ],
        phone: [
          {
            validator: valitPhone,
            message: "请输入手机号",
            trigger: "blur",
          },
        ],
        auth_book: [
          {
            required: true,
            message: "请上传授权书",
            trigger: "change",
          },
        ],
        // code: [{
        // 	required: true,
        // 	message: "请输入验证码",
        // 	trigger: "blur"
        // }],
        auth_book: [
          /* {
            required: true,
            message: "请上传授权书",
            trigger: "change",
          }, */
        ],
      },
      /* 是否禁用 */
      cdTimer: null,
      codeBtnTxt: "获取验证码",
      /* 显示或隐藏 */
      second: false,
    };
  },
  methods: {
    getCode() {
      /*  let self = this;
      self.isValidPhone();
      if (!self.isValidPhoneFlag) return;

      let params = {
        source_type: 1,
        account: self.phone,
        captcha_type: 8,
      };
      self.axios.post(`xxxx`, params, (res) => {
        if (res === -1) return;
        self.$toast("验证码已发送");
        self.disabled = true;
        // 设置定时器
        self.createTimer();
      }); */
    },
    //手机号校验
    /*  isValidPhone() {
      var numReg =
        /^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[0-9]{1})|(18[0-9]{1})|(19[0-9]{1}))+\d{8})$/;
      if (!numReg.test(this.phone)) {
        this.phoneErrorMessage = "请输入正确手机号码";
        this.isValidPhoneFlag = false;
      } else {
        this.phoneErrorMessage = "";
        this.isValidPhoneFlag = true;
      }
    }, */
    //设置定时器
    /* createTimer() {
      let self = this;
      let endTime = new Date(new Date().getTime() + 60 * 1000);

      self.codeBtnTxt = "60s后重新获取";
      self.timer = setInterval(() => {
        let diffTime =
          (Date.parse(new Date(endTime)) - Date.parse(new Date())) / 1000;
        if (diffTime < 0) {
          self.codeBtnTxt = "获取验证码";
          self.disabled = false;
          clearInterval(self.timer);
          self.timer = null;
        } else {
          self.codeBtnTxt = diffTime + "s后重新获取";
          self.disabled = true;
        }
      }, 1000);
    }, */
    //注册个人账号
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let send = JSON.parse(JSON.stringify(this.ruleForm));
          api
            .register(send)
            .then((res) => {
              if (res.data.code === 200) {
                this.$message({
                  message: res.data.msg,
                  showClose: true,
                  duration: 3000,
                  type: "success",
                });
                setTimeout(() => {
                  this.$router.push("/login");
                }, 3000);
              } else {
                this.$message({
                  message: res.data.msg,
                  showClose: true,
                  duration: 3000,
                  type: "error",
                });
              }
              console.log(res);
            })
            .catch((err) => {
              console.log(err);

              this.$message({
                message: err,
                showClose: true,
                duration: 3000,
                type: "error",
              });
            });
        }
      });
    },
    //注册公司账号
    submitFormCompanyFirst(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          console.log(this.ruleFormCompanyFirst);
          let res = await storeCompanyAndUser(this.ruleFormCompanyFirst);
          console.log(res);
          if (res.data.code === 200) {
            this.$message({
              message: res.data.msg,
              showClose: true,
              duration: 3000,
              type: "success",
            });
            setTimeout(() => {
              this.$router.push("/login");
            }, 3000);
          } else {
            this.$message({
              message: res.data.msg,
              showClose: true,
              duration: 3000,
              type: "error",
            });
          }
        }
      });
    },
    //已有账号回到登录页面
    goLogin() {
      this.$router.push({
        path: "/login",
      });
    },
    // 授权书下载
    aDown() {
      console.log(1);
      let host = localStorage.getItem("host");
      let link = document.createElement("a");
      link.setAttribute("href", host + "/api/index/example_template?type=2");
      link.setAttribute("download", `下载授权书模板`);
      link.click();
    },
    // 授权书上传
    handleSuccess(response, file, fileList) {
      console.log(response, file, fileList);
      this.$message({
        message: response.msg,
        showClose: true,
        duration: 3000,
        type: "success",
      });
      this.ruleFormCompanyFirst.auth_book = file.name;
    },
    //返回上一个页面
    goPrevious() {
      this.second = false;
    },
  },
};
</script>

<style scoped lang="less">
.loginBox {
  width: 100%;
  height: 100%;
  position: relative;
}

.fixedBox {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loginFrom {
  width: 386px;
  height: 481px;
  background: #ffffff;
  opacity: 1;
  border-radius: 0px;
  display: flex;
  justify-content: center;

  .title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0 30px;

    .logo {
      width: 59px;
      height: 59px;
      margin-right: 10px;

      & img {
        width: 100%;
        height: 100%;
      }
    }

    .nama {
      font-size: 30px;
      font-weight: bold;
      color: #3963fd;
      opacity: 1;
    }
  }

  .getcode {
    width: 100px;
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    opacity: 1;
    height: 40px;
    border: none;
    background: #ff9d2d;
    position: relative;
    left: -16px;
    border-radius: 0 3px 3px 0;
  }
  /deep/ .el-upload {
    position: relative;
    left: -10px;
    border-radius: 0 3px 3px 0;
  }
  .uploadBtn {
    width: 65px;
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    opacity: 1;
    line-height: 1;
    height: 40px;
    border: none;
    background: #ff9d2d;
    border-radius: 0 3px 3px 0;
    img {
      width: 25px;
      height: 25px;
    }
  }
  .login-btn {
    text-align: center;
    margin: 30px 0;
    display: flex;
  }

  .login-btn button {
    width: 100%;
    height: 48px;
    font-size: 16px;
    background: #3963fd;
    box-shadow: 0px 10px 25px rgba(57, 99, 253, 0.61);
    opacity: 1;
    border-radius: 0px;
  }

  .registerBtn {
    font-size: 14px;
    font-weight: 500;
    color: #000000;
    opacity: 1;
    text-align: center;

    & button {
      padding: 0;
      color: #ff9d2d;
    }
  }
}

.limitLength {
  width: 210px;
}

/deep/ .upload-demo {
  width: 70px;
}

/deep/ .upload-demo {
  position: relative;
}

/deep/ .el-upload-list {
  position: absolute;
  top: 0;
  left: -190px;
  max-width: 170px;
}
/deep/.el-input-group__prepend {
  color: #000;
}
/deep/.el-input__icon {
  color: #3963fd;
}
/deep/.el-row {
  width: 79%;
}
.Row {
  width: 100%;
}
/deep/.el-form-item__content {
  display: flex;
  justify-content: space-between;
}
/deep/ .el-col-16 {
  width: 73.6666%;
}
//受授权
/deep/.el-col-8 {
  width: 10.3333333%;
}
</style>
